Absoluuttisen asemoinnin tuolla puolen: Syväsukellus CSS @position-try -sääntöön ja ankkuriasemointiin

Verkkokehittäjät ovat vuosikymmeniä painineet yleisten käyttöliittymähaasteiden parissa: luodessaan työkaluvihjeitä, ponnahdusikkunoita, pikavalikoita ja muita leijuvia elementtejä, jotka asettuvat älykkäästi suhteessa laukaisijaansa. Perinteinen lähestymistapa on lähes aina vaatinut herkkää tasapainottelua CSS:n `position: absolute` -ominaisuuden ja runsaan JavaScript-koodin välillä, jolla on laskettu sijainteja, havaittu törmäyksiä näkymäikkunan kanssa ja käännetty elementin paikkaa lennosta.

Tämä JavaScript-painotteinen ratkaisu, vaikka onkin tehokas, tuo mukanaan omat haittapuolensa: suorituskykykuorman, ylläpidon monimutkaisuuden ja jatkuvan taistelun logiikan pitämiseksi vankkana. Popper.js:n kaltaisista kirjastoista tuli alan standardeja juuri siksi, että tämän ongelman ratkaiseminen natiivisti oli niin vaikeaa. Mutta mitä jos voisimme määritellä nämä monimutkaiset asemointistrategiat suoraan CSS:ssä?

Tässä kohtaa astuu kuvaan CSS Anchor Positioning API, mullistava ehdotus, joka tulee mullistamaan tavan, jolla käsittelemme näitä tilanteita. Sen ytimessä on kaksi voimakasta konseptia: kyky "ankkuroida" yksi elementti toiseen riippumatta niiden DOM-suhteesta, ja joukko varasijaintisääntöjä, jotka määritellään @position-try-säännöllä. Tämä artikkeli tarjoaa kattavan tutkimusmatkan tähän CSS:n uuteen ulottuvuuteen, antaen sinulle valmiudet rakentaa kestävämpiä, suorituskykyisempiä ja deklaratiivisempia käyttöliittymiä.

Perinteisen asemoinnin sitkeä ongelma

Ennen kuin voimme arvostaa uuden ratkaisun eleganssia, meidän on ensin ymmärrettävä vanhan rajoitukset. Dynaamisen asemoinnin työhevonen on aina ollut `position: absolute`, joka asemoi elementin suhteessa sen lähimpään asemoituun esi-isään.

JavaScript kainalosauvana

Ajatellaan yksinkertaista työkaluvihjettä, jonka tulisi ilmestyä painikkeen yläpuolelle. `position: absolute` -ominaisuudella voit sijoittaa sen oikein. Mutta mitä tapahtuu, kun painike on lähellä selainikkunan yläreunaa? Työkaluvihje leikkautuu pois. Tai jos se on lähellä oikeaa reunaa? Työkaluvihje ylittää reunan ja aiheuttaa vaakasuuntaisen vierityspalkin.

Tämän ratkaisemiseksi kehittäjät ovat perinteisesti turvautuneet JavaScriptiin:

• Hae ankkurielementin sijainti ja mitat `getBoundingClientRect()`-metodilla.
• Hae työkaluvihjeen mitat.
• Hae näkymäikkunan mitat (`window.innerWidth`, `window.innerHeight`).
• Suorita sarja laskutoimituksia määrittääksesi ihanteelliset `top`- ja `left`-arvot.
• Tarkista, aiheuttaako tämä ihanteellinen sijainti törmäyksen näkymäikkunan reunojen kanssa.
• Jos aiheuttaa, laske sijainti uudelleen vaihtoehtoiseen paikkaan (esim. käännä se ilmestymään painikkeen alapuolelle).
• Lisää tapahtumankuuntelijat `scroll`- ja `resize`-tapahtumille toistaaksesi koko prosessin aina, kun asettelu saattaa muuttua.

Tämä on huomattava määrä logiikkaa tehtävään, joka tuntuu puhtaasti esitykselliseltä. Se on hauras, voi aiheuttaa asettelun nykimistä, jos sitä ei toteuteta huolellisesti, ja lisää sovelluksesi pakettikokoa sekä pääsäikeen kuormitusta.

Uusi paradigma: Esittelyssä CSS-ankkuriasemointi

CSS Anchor Positioning API tarjoaa deklaratiivisen, pelkästään CSS:ään perustuvan tavan hallita näitä suhteita. Perusajatuksena on luoda yhteys kahden elementin välille: asemoidun elementin (esim. työkaluvihje) ja sen ankkurin (esim. painike) välille.

Ydinominaisuudet: `anchor-name` ja `position-anchor`

Taikuus alkaa kahdella uudella CSS-ominaisuudella:

• `anchor-name`: Tätä ominaisuutta sovelletaan elementtiin, jota haluat käyttää viitepisteenä. Se antaa ankkurille käytännössä ainutlaatuisen, yhdysviivalla alkavan nimen, johon voidaan viitata muualla.
• `position-anchor`: Tätä ominaisuutta sovelletaan asemoituun elementtiin ja se kertoo sille, mitä nimettyä ankkuria sen tulee käyttää sijaintilaskelmissaan.

Katsotaanpa perusesimerkkiä:

            
<!-- HTML-rakenne -->
<button id="my-button">Vie hiiri päälle</button>
<div class="tooltip">Tämä on työkaluvihje!</div>

<!-- CSS -->
#my-button {
  anchor-name: --my-button-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  /* Nyt voimme asemoida suhteessa ankkuriin */
  bottom: anchor(top);
  left: anchor(center);
}

            

              
                Copy
              
            
          

Tässä koodinpätkässä painike on määritelty ankkuriksi nimeltä `--my-button-anchor`. Työkaluvihje käyttää sitten `position-anchor`-ominaisuutta linkittääkseen itsensä kyseiseen ankkuriin. Todella vallankumouksellinen osa on `anchor()`-funktio, jonka avulla voimme käyttää ankkurin rajoja (`top`, `bottom`, `left`, `right`, `center`) asemointiominaisuuksiemme arvoina.

Tämä jo yksinkertaistaa asioita, mutta se ei vielä ratkaise näkymäikkunan törmäysongelmaa. Siinä kohtaa @position-try astuu kuvaan.

Ratkaisun ydin: `@position-try` ja `position-fallback`

Jos ankkuriasemointi luo linkin elementtien välille, `@position-try` tarjoaa älykkyyden. Sen avulla voit määritellä priorisoidun listan vaihtoehtoisista asemointistrategioista. Selain kokeilee sitten kutakin strategiaa järjestyksessä ja valitsee niistä ensimmäisen, joka mahdollistaa asemoidun elementin mahtumisen sen sisältävään lohkoon (tyypillisesti näkymäikkunaan) ilman leikkautumista.

Varasijaintivaihtoehtojen määrittely

Yksi `@position-try`-lohko on nimetty joukko CSS-sääntöjä, joka määrittelee yhden asemointivaihtoehdon. Voit luoda näitä niin monta kuin tarvitset.

            
/* Vaihtoehto 1: Sijoita ankkurin yläpuolelle */
@position-try --tooltip-top {
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);
}

/* Vaihtoehto 2: Sijoita ankkurin alapuolelle */
@position-try --tooltip-bottom {
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
}

/* Vaihtoehto 3: Sijoita ankkurin oikealle puolelle */
@position-try --tooltip-right {
  left: anchor(right);
  top: anchor(center);
  transform: translateY(-50%);
}

/* Vaihtoehto 4: Sijoita ankkurin vasemmalle puolelle */
@position-try --tooltip-left {
  right: anchor(left);
  top: anchor(center);
  transform: translateY(-50%);
}

            

              
                Copy
              
            
          

Huomaa, kuinka kukin lohko määrittelee täydellisen asemointistrategian. Olemme luoneet neljä erillistä vaihtoehtoa: ylös, alas, oikealle ja vasemmalle suhteessa ankkuriin.

Varasijaintien soveltaminen `position-fallback`-ominaisuudella

Kun olet luonut `@position-try`-lohkot, kerrot asemoidulle elementille, että se käyttää niitä `position-fallback`-ominaisuudella. Järjestyksellä on väliä – se määrittelee prioriteetin.

            
.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  position-fallback: --tooltip-top --tooltip-bottom --tooltip-right --tooltip-left;
}

            

              
                Copy
              
            
          

Tällä yhdellä CSS-rivillä olet ohjeistanut selainta:

1. Ensiksi, yritä asemoida työkaluvihje käyttämällä `--tooltip-top`-lohkon sääntöjä.
2. Jos kyseinen sijainti aiheuttaa työkaluvihjeen leikkautumisen näkymäikkunan reunasta, hylkää se ja yritä `--tooltip-bottom`-lohkon sääntöjä.
3. Jos sekin epäonnistuu, yritä `--tooltip-right`.
4. Ja jos kaikki muu epäonnistuu, yritä `--tooltip-left`.

Selain hoitaa kaiken törmäysten havaitsemisen ja sijainnin vaihdon automaattisesti. Ei `getBoundingClientRect()`-kutsuja, ei `resize`-tapahtumankuuntelijoita, ei JavaScriptiä. Tämä on valtava muutos imperatiivisesta JavaScript-logiikasta deklaratiiviseen CSS-lähestymistapaan.

Kattava, käytännön esimerkki: Törmäyksistä tietoinen ponnahdusikkuna

Rakennetaanpa vankempi esimerkki, joka yhdistää ankkuriasemoinnin moderniin Popover API:hin täysin toimivaksi, saavutettavaksi ja älykkääksi käyttöliittymäkomponentiksi.

Vaihe 1: HTML-rakenne

Käytämme natiivia `popover`-attribuuttia, joka antaa meille tilanhallinnan (avoinna/suljettu), kevyen hylkäämistoiminnon (klikkaamalla ulkopuolelle se sulkeutuu) ja saavutettavuushyödyt ilmaiseksi.

            
<button popovertarget="my-popover" id="popover-trigger">
  Napsauta tästä
</button>

<div id="my-popover" popover>
  <h3>Ponnahdusikkunan otsikko</h3>
  <p>Tämä ponnahdusikkuna asemoi itsensä älykkäästi uudelleen pysyäkseen näkymäikkunan sisällä. Kokeile muuttaa selaimesi kokoa tai vierittää sivua!</p>
</div>

            

              
                Copy
              
            
          

Vaihe 2: Ankkurin määrittely

Määrittelemme painikkeemme ankkuriksi. Lisätään myös hieman perusmuotoilua.

            
#popover-trigger {
  /* Tämä on avainosa */
  anchor-name: --popover-anchor;

  /* Perustyylit */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

Vaihe 3: `@position-try`-vaihtoehtojen määrittely

Nyt luomme asemointivaihtoehtojen sarjan. Lisäämme jokaiseen tapaukseen pienen `margin`-arvon luodaksemme tilaa ponnahdusikkunan ja laukaisijan väliin.

            
/* Prioriteetti 1: Sijoita laukaisijan yläpuolelle */
@position-try --popover-top {
  bottom: anchor(top, 8px);
  left: anchor(center);
}

/* Prioriteetti 2: Sijoita laukaisijan alapuolelle */
@position-try --popover-bottom {
  top: anchor(bottom, 8px);
  left: anchor(center);
}

/* Prioriteetti 3: Sijoita oikealle */
@position-try --popover-right {
  left: anchor(right, 8px);
  top: anchor(center);
}

/* Prioriteetti 4: Sijoita vasemmalle */
@position-try --popover-left {
  right: anchor(left, 8px);
  top: anchor(center);
}

            

              
                Copy
              
            
          

Huomautus: `anchor()`-funktio voi ottaa valinnaisen toisen argumentin, joka toimii varoarvona. Tässä käytämme kuitenkin epästandardia syntaksia havainnollistaaksemme mahdollista tulevaa parannusta marginaaleille. Nykyään oikea tapa olisi käyttää `calc(anchor(top) - 8px)` tai vastaavaa, mutta tarkoituksena on luoda väli.

Vaihe 4: Ponnahdusikkunan muotoilu ja varasijaintien soveltaminen

Lopuksi muotoilemme ponnahdusikkunamme ja yhdistämme kaiken.

            
#my-popover {
  /* Linkitä ponnahdusikkuna nimettyyn ankkuriimme */
  position-anchor: --popover-anchor;

  /* Määritä varasijaintivaihtoehtojemme prioriteetti */
  position-fallback: --popover-top --popover-bottom --popover-right --popover-left;

  /* Meidän on käytettävä fixed- tai absolute-asemointia, jotta tämä toimii */
  position: absolute;

  /* Oletustyylit */
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0; /* Popover API lisää oletuksena marginaalin, nollaamme sen */
}

/* Ponnahdusikkuna on piilossa, kunnes se avataan */
#my-popover:not(:popover-open) {
  display: none;
}

            

              
                Copy
              
            
          

Ja siinä kaikki! Tällä koodilla sinulla on täysin toimiva ponnahdusikkuna, joka kääntää automaattisesti sijaintinsa välttääkseen leikkautumisen näytön reunojen vuoksi. Asemointilogikkaan ei tarvita JavaScriptiä.

Edistyneet konseptit ja hienosäätö

Anchor Positioning API tarjoaa vielä enemmän hallintaa monimutkaisissa tilanteissa.

Syvempi sukellus `anchor()`-funktioon

`anchor()`-funktio on uskomattoman monipuolinen. Kyse ei ole vain neljästä reunasta. Voit myös kohdistaa ankkurin koon prosenttiosuuksiin.

• `anchor(left)` tai `anchor(start)`: Ankkurin vasen reuna.
• `anchor(right)` tai `anchor(end)`: Oikea reuna.
• `anchor(top)`: Yläreuna.
• `anchor(bottom)`: Alareuna.
• `anchor(center)`: Vaaka- tai pystysuuntainen keskikohta kontekstista riippuen. `left`- tai `right`-ominaisuuksille se on vaakasuuntainen keskikohta. `top`- tai `bottom`-ominaisuuksille se on pystysuuntainen keskikohta.
• `anchor(50%)`: Vastaa `anchor(center)`-arvoa.
• `anchor(25%)`: Piste, joka on 25 % ankkurin akselin pituudesta.

Lisäksi voit käyttää ankkurin mittoja laskelmissasi `anchor-size()`-funktion avulla:

            
.element {
  /* Tee elementistä puolet ankkurinsa leveydestä */
  width: calc(anchor-size(width) * 0.5);
}

            

              
                Copy
              
            
          

Implisiittiset ankkurit

Joissakin tapauksissa sinun ei tarvitse edes eksplisiittisesti määritellä `anchor-name`- ja `position-anchor`-ominaisuuksia. Tietyissä suhteissa selain voi päätellä implisiittisen ankkurin. Yleisin esimerkki on `popovertarget`-painikkeen avaama ponnahdusikkuna. Tässä tapauksessa painikkeesta tulee automaattisesti ponnahdusikkunan implisiittinen ankkuri, mikä yksinkertaistaa CSS:ääsi:

            
#my-popover {
  /* position-anchor -ominaisuutta ei tarvita! */
  position-fallback: --popover-top --popover-bottom;
  ...
}

            

              
                Copy
              
            
          

Tämä vähentää toistuvaa koodia ja tekee laukaisijan ja ponnahdusikkunan välisestä suhteesta entistä suoremman.

Selaintuki ja tie eteenpäin

Vuoden 2023 loppupuolella CSS Anchor Positioning API on kokeellinen teknologia. Se on saatavilla Google Chromessa ja Microsoft Edgessä ominaisuuslipun takana (etsi "Experimental Web Platform features" osoitteesta `chrome://flags`).

Vaikka se ei ole vielä valmis tuotantokäyttöön kaikissa selaimissa, sen olemassaolo suuressa selainmoottorissa on vahva signaali sitoutumisesta tämän pitkäaikaisen CSS-ongelman ratkaisemiseen. Kehittäjien on tärkeää kokeilla sitä, antaa palautetta selainvalmistajille ja valmistautua tulevaisuuteen, jossa JavaScriptin käyttö elementtien asemointiin on poikkeus, ei sääntö.

Voit seurata sen käyttöönoton tilaa alustoilla kuten "Can I use...". Toistaiseksi pidä sitä progressiivisen parantamisen työkaluna. Voit rakentaa käyttöliittymäsi `@position-try`-säännöllä ja käyttää `@supports`-kyselyä tarjotaksesi yksinkertaisemman, kääntymättömän sijainnin selaimille, jotka eivät tue sitä, kun taas modernien selainten käyttäjät saavat parannetun kokemuksen.

Käyttökohteita ponnahdusikkunoiden lisäksi

Tämän APIn potentiaaliset sovellukset ovat laajat ja ulottuvat paljon pidemmälle kuin yksinkertaisiin työkaluvihjeisiin.

• Mukautetut valintavalikot: Luo kauniita, mukautettuja ``-pudotusvalikoita, jotka avautuvat älykkäästi ylös- tai alaspäin käytettävissä olevan tilan mukaan.
  Pikavalikot: Asemoi mukautettu hiiren oikean painikkeen valikko tarkasti kohdistimen sijainnin tai kohde-elementin viereen.
  Käyttöönottokierrokset: Opasta käyttäjiä sovelluksesi läpi ankkuroimalla opetusvaiheet niitä kuvaaviin käyttöliittymäelementteihin.
  RTE-editorit (Rich Text Editors): Asemoi muotoilutyökalupalkit valitun tekstin ylä- tai alapuolelle.
  Monimutkaiset kojelaudat: Näytä yksityiskohtaisia tietokortteja, kun käyttäjä on vuorovaikutuksessa kaavion tai kuvaajan datapisteen kanssa.

  Johtopäätös: Deklaratiivinen tulevaisuus dynaamisille asetteluille

  CSS `@position-try` ja laajempi Anchor Positioning API edustavat perustavanlaatuista muutosta siinä, miten lähestymme käyttöliittymien kehitystä. Ne siirtävät monimutkaisen, imperatiivisen asemointilogiikan JavaScriptistä sopivampaan, deklaratiiviseen kotiin CSS:ään.

  Hyödyt ovat selvät:

  • Vähemmän monimutkaisuutta: Ei enää manuaalisia laskelmia tai monimutkaisia JavaScript-kirjastoja asemointiin.
  • Parempi suorituskyky: Selaimen optimoitu renderöintimoottori hoitaa asemoinnin, mikä johtaa sulavampaan suorituskykyyn kuin skriptipohjaiset ratkaisut.
  • Kestävämpiä käyttöliittymiä: Asettelut mukautuvat automaattisesti eri näyttökokoihin ja sisältömuutoksiin ilman lisäkoodia.
  • Siistimpi koodikanta: Vastuualueiden erottelu paranee, kun muotoilu- ja asettelulogiikka sijaitsee kokonaan CSS:ssä.

  Odottaessamme laajaa selaintukea, nyt on aika oppia, kokeilla ja puolustaa näitä tehokkaita uusia työkaluja. Ottamalla `@position-try`-säännön käyttöön astumme tulevaisuuteen, jossa verkkoympäristö itse tarjoaa elegantteja ratkaisuja yleisimpiin ja turhauttavimpiin asetteluhaasteisiimme.